<template>
    <div>
        <div class="mask" 
        v-if="showCart && calculations.total>0"
        @click="handleCartShowChange"></div>
        <div class="cart">
            <div class="product" v-if="showCart && calculations.total>0">
                <div class="product_header">
                    <div class="product_header_all"
                    @click="()=>{setCartItemsChecked(shopId)}"
                    >
                        <span 
                        class="product_header_icon iconfont"
                        v-html="calculations.allChecked ? '&#xe624;' : '&#xe81d;'"
                        >
                            
                        </span>    
                        全选
                    </div>
                    <div 
                    class="product_header_clear"
                    >
                    <span class="product_header_clear_btn"
                    @click="()=>{cleanCartProducts(shopId)}"
                    >
                        清空购物车
                    </span>
                    </div>
                </div>
                <div 
                class="product_item" 
                v-for="item in productList" 
                :key="item._id">
                    <div class="product_item_checked iconfont"
                    v-html="item.check ? '&#xe624;': '&#xe81d;'"
                    @click="()=>{changeCartItemCheck(shopId,item._id)}"
                    >  
                    </div>
                    <img class="product_item_img"  :src="item.imgUrl" alt="">
                    <div class="product_item_detail">
                        <h4 class="product_item_title">{{item.name}}</h4>
                        <p class="product_item_price">
                            <span class="product_item_yen">&yen;</span>{{item.price}}
                            <span class="product_item_origin">&yen;{{item.oldPrice}}</span>
                        </p>
                    </div>
                    <div class="product_number">
                        <span 
                        class="product_number_minus"
                        @click="()=>{changeCartItemInfo(shopId,item._id,item,-1)}"
                        >-</span>
                        {{item.count || 0}}
                        <span 
                        class="product_number_plus"
                        @click="()=>{changeCartItemInfo(shopId,item._id,item,1)}"
                        >+</span>
                    </div>
                </div>
            </div>
            <div class="check">
                <div class="check_icon">
                    <img 
                    src="http://www.dell-lee.com/imgs/vue3/basket.png"
                    class="check_icon_img"
                    @click="handleCartShowChange" 
                    alt="">
                    <div class="check_icon_tag">{{calculations.total}}</div>
                </div>
                <div class="check_info">
                    总计：<span class="check_info_price">&yen; {{calculations.price}}</span>
                </div>
                <div class="check_btn" v-show="calculations.total>0">
                    <router-link :to="{path:`/orderComfirmation/${shopId}`}">
                        去结算
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {ref} from 'vue'
import {useStore} from 'vuex'
import {useRoute} from 'vue-router'
import {uesCommonCartEffect} from '../../effects/cartEffects'

//购物车相关逻辑
const useCartEffect=(shopId)=>{
    const store = useStore();
    const {changeCartItemInfo,productList,calculations} = uesCommonCartEffect(shopId);
    
    //切换选中按钮
    const changeCartItemCheck=(shopId,productId)=>{
        store.commit('changeCartItemCheck',{shopId,productId})
    }
    //清空购物车
    const cleanCartProducts=(shopId)=>{
        store.commit('cleanCartProducts',{shopId})
    }
    //一键全选
    const setCartItemsChecked=(shopId)=>{
        store.commit('setCartItemsChecked',{shopId})
    }
    return {calculations,productList,changeCartItemInfo,changeCartItemCheck,cleanCartProducts,setCartItemsChecked}
}
//展示隐藏购物车逻辑
const toggleCartEffect=()=>{
    //控制购物车展示
    const showCart=ref(false)
    const handleCartShowChange=()=>{
        showCart.value=!showCart.value
    }
    return {showCart,handleCartShowChange}
}
export default {
    naem:'Cart',
    setup() {
        //购物车相关逻辑
        const route = useRoute()
        const shopId=route.params.id
        const {calculations,productList,changeCartItemInfo,changeCartItemCheck,cleanCartProducts,setCartItemsChecked}=useCartEffect(shopId);
        console.log(productList);
        //控制购物车展示
        const {showCart,handleCartShowChange}=toggleCartEffect();
        //导出
        return {calculations,productList,shopId,changeCartItemInfo,changeCartItemCheck,cleanCartProducts,setCartItemsChecked,showCart,handleCartShowChange}
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables';
@import '../../style/mixins';
.mask{
     position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0,0,0,0.50);
    z-index: 1;
}
.cart{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: $bgColor;
}
.product{
    flex: 1;
    overflow-y: scroll;
    background: $bgColor;
    &_header{
        line-height: .52rem;
        display: flex;
        border-bottom:.01rem solid $content-bgcolor;
        font-size: .14rem;
        color: $content-fontcolor;
        &_all{
            width: .64rem;
            margin-left: .16rem;
        }
        &_icon{
            display: inline-block;
            vertical-align: top;
            color: $btn-bgColor;
            font-size: .2rem;
            margin-right: .1rem;
        }
        &_clear{
            flex: 1;
            margin-right: .18rem;
            text-align: right;
            &_btn{
                display: inline-block;
            }
        }
    }
    &_item{
        position: relative;
        display: flex;
        padding: .12rem 0;
        margin: 0 .16rem;
        border-bottom: .01rem solid $content-bgcolor;
        &_checked{
            color: $btn-bgColor;
            font-size: .2rem;
            line-height: .5rem;
            margin-right: .2rem;
        }
        &_detail{
            overflow: hidden;
        }
        &_img{
            width: .46rem;
            height: .46rem;
            margin-right: .16rem;
        }
        &_title{
            margin: 0;
            line-height: .2rem;
            font-size: .14rem;
            color: $content-fontcolor;
            @include ellipsis;
        }
        &_price{
            margin: .06rem 0 0 0;
            font-size: .14rem;
            color: $hightlight-fontColor;
            line-height: .2rem;
        }
        &_yen{
            font-size: .12rem;
        }
        &_origin{
            font-size: .12rem;
            color: $light-fontColor;
            line-height: .2rem;
            text-decoration: line-through;
            margin-left: .06rem;
        }
        .product_number{
            position: absolute;
            right: 0;
            bottom: .26rem;
            &_minus,&_plus{
                display: inline-block;
                width: .2rem;
                height: .2rem;
                border-radius: 50%;
                line-height: .16rem;
                text-align: center;
                font-size: .2rem;
            }
            &_minus{
                border: .01rem solid $medium-fontColor;
                color: $medium-fontColor;
                margin-right: .05rem;
            }
            &_plus{
                border-color: $btn-bgColor;
                background: $btn-bgColor;
                color: $bgColor;
                margin-left: .05rem;
            }
        }
    }
}
.check{
    display: flex;
    height: .49rem;
    border-top: .01rem solid $content-bgcolor;
    line-height: .49rem;
    &_icon{
        width: .84rem;
        position: relative;
        &_img{
            width: .28rem;
            height: .26rem;
            display: block;
            margin: .12rem auto;
            line-height: .24rem;
        }
        &_tag{
            position: absolute;
            left: .46rem;
            top: .04rem;
            padding: .04rem;
            min-width: .2rem;
            height: .2rem;
            line-height: .2rem;
            text-align: center;
            background-color: $hightlight-fontColor;
            border-radius: .1rem;
            font-size: .16rem;
            color: $bgColor;
            transform: scale(.5);
            transform-origin: left center;
        }
    }
    &_info{
        flex: 1;
        font-size: .12rem;
        color: $content-fontcolor;
        &_price{
            font-size: .18rem;
            color: $hightlight-fontColor;
        }
    }
    &_btn{
        width: .98rem;
        background: #4FB0F9;
        line-height: .49rem;
        font-size: .14rem;
        text-align: center;
        a{
            color: $bgColor;
            text-decoration: none;
        }
    }
}
</style>